<template>
	<view>
		<!-- <view class="navbar">
			<view class="iconfont fontstyle" @click="gotoback">&#xe616;</view>
			<text style="margin-left: 20rpx;">我的钱包</text>
			<navigator url="/pages/cash/cashlist" class="bill">记录</navigator>
		</view> -->
		<mescroll-body ref="mescrollRef" top="150" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
		 @up="upCallback">
			<view class="container">
				<view class="container-item">
					<view class="pirze-font">
						<image src="/static/image/amount.png" mode="aspectFit"></image>
						<text>零钱(元)</text>
					</view>
					<view class="pirze-num">{{userinfo.money}}</view>
					<!-- 	<view class="selfmoney">{{amountdetail}}</view> -->
					<view class="money-box">
						<view :class="['item-box',moneytype==2?'choice':'']" @click="moneytype=2">
							<view class="money">{{selfmoney}}</view>
							<view class="desc">个人现金钱包</view>
						</view>
						<view :class="['item-box',moneytype==1?'choice':'']" @click="moneytype=1">
							<view class="money">{{(userinfo.money-selfmoney).toFixed(2)}}</view>
							<view class="desc">平台福利钱包</view>
						</view>
						<view class="line"></view>
					</view>
					<!-- 		<view class="changren" :style="{transform: 'rotate('+deg+'deg)'}" @click="switchmoney">
						<image src="/static/image/change-money.png" mode="aspectFit"></image>
					</view> -->
					<view class="cashmoneylist">
						<view v-for="(item,index) in cashmoney" :key="index">
							<view @click="cashIndex=index" :class="['moneyitem',cashIndex==index?'hoverIndex':'']" v-if="item.money">
								<view class="newuser" v-if="item.first">新人专享</view>
								<image class="seleted" v-if="cashIndex==index" src="/static/image/seletedmoney.png" mode="aspectFit"></image>
								<text>{{item.money}}元</text>
							</view>
							<view class="inputform" v-else @click="cashIndex=index">
								<input @blur="getranking" placeholder-style="font-size:28rpx" placeholder="≥150元" type="digit" maxlength="6" />
							</view>
						</view>
					</view>
					<view class="paytype">
						<!-- 	<view class="payitem" @click="showtip">
							<image src="/static/image/wxpaycolor.png"  mode="aspectFit"></image>
							<view>微信钱包</view>
						</view> -->
						<view class="payitem" :style="{border:paytypeIndex==index?payborder[0]:'','box-shadow':paytypeIndex==index?payborder[1]:''}"
						 v-for="(item,index) in paymode" :key="index" @click="payselect(index)">
							<image :src="item.icon" mode="aspectFit"></image>
							<view>{{item.title}}</view>
							<image class="seleted" v-if="paytypeIndex==index" :src="paytypeIndex==0?'/static/image/choice-wechat.png':'/static/image/choice-alipay.png'"
							 mode="aspectFit"></image>
						</view>
					</view>
					<!-- <view class="selfmoney" v-if="selfmoney>0">抽奖红包<text>{{selfmoney}}</text>元</view> -->
					<view class="cash-button" @click="cashop">立即提现</view>
				</view>

				<!--提现规则-->
				<view class="container-item">
					<view class="top-info">
						<view class="title">
							<view class="line"></view>
							<text>提现说明</text>
						</view>
						<navigator url="/pages/bonus/bonus" class="more-cash">更多现金红包 ></navigator>
					</view>
					<view class="bottom-info">
						<!-- <view class="cashguize">{{}}</view> -->
						<jyf-parser :html="withdraw"></jyf-parser>
					</view>
				</view>
				<!--本周提现排行-->
				<!-- <view class="container-item">
					<view class="top-info">
						<view class="title">
							<view class="line"></view>
							<text>提现排行榜</text>
						</view>
					</view>
					<view class="bottom-info">
						<view class="rank" v-for="(item,index) in listdata" :key="index">
							<view class="rank-left">
								<image v-if="index<=2" class="rankicon" :src="'../../static/image/ranking'+index+'.png'"></image>
								<view class="rankicon" v-else>{{index+1}}</view>
								<view class="headimg">
									<image :src="item.avatar" mode="aspectFill"></image>
									<text>{{item.nickname}}</text>
								</view>
							</view>
							<view class="rank-right">
								<text>{{item.money}}元</text>
							</view>
						</view>

						<view class="jilu">
							仅展示前20名~
						</view>
					</view>
				</view> -->
			</view>
		</mescroll-body>

		<!--提现提框-->
		<alert modeltitle="提示" :visible="cashshow">
			<view class="continuetip">
				<image class="imgsucc" src="/static/image/cash-success.png" mode="aspectFill"></image>
				<view class="fonttext">{{cashtip}}</view>
				<view class="editbutton">
					<view class="continue" @click="cashshow=false">完成</view>
				</view>
			</view>
		</alert>
		<!--加载遮罩-->
		<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				ranking:0,
				cashtip: '提现到账成功',
				cashshow: false, //提现提示框
				deg: 0, //旋转度数组
				payborder: ['1rpx solid #6bc839', 'inset 0 0 5rpx #6bc839'],
				paytypeIndex: 0,
				paymode: [{
						paytype: 'wxpay',
						title: '微信钱包',
						icon: '/static/image/wxpaycolor.png'
					},
					{
						paytype: 'alipay',
						title: '支付宝钱包',
						icon: '/static/image/alipaycolor.png'
					}
				],
				moneytype: 2, //提现类型
				listdata: [],
				userinfo: uni.getStorageSync('user_info'),
				selfmoney: 0,

				rankdata: 2,
				//下拉参数配置
				downOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					textColor: "#ffffff",
					textLoading: '玩命加载中...',
					outOffsetRate: 0,
					autoShowLoading: true, //自动执行一次下来 
				},
				//上拉参数配置
				upOption: {
					use: false
				},
				globelloading: true, //全局加载
				cashmoney: [],
				cashIndex: 0, //选择提现索引
				amount: '', //提现金额
				amountdetail: '', //红包描述
				//amountIndex:0
				withdraw: getApp().globalData.ruleconfig.withdraw,
			}
		},
		onLoad() {
			uni.$on("closewindown", (param) => {
				this.cashshow = param;
			})
			//console.log(uni.getStorageSync('user_info'))
		},
		//监听右上角事件
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/cash/cashlist'
			})
		},
		watch: {
			listdata() {
				this.globelloading = false
			}
		},
		methods: {
			//切换支付方式
			payselect(index) {
				this.paytypeIndex = index
				if (index == 0) {
					this.payborder = ['1rpx solid #6bc839', 'inset 0 0 5rpx #6bc839']
				} else if (index == 1) {
					this.payborder = ['1rpx solid #02a9f1', 'inset 0 0 5rpx #02a9f1']
				}
			},
			//切换金额
			switchmoney() {
				this.moneytype = this.moneytype != 2 ? 2 : 1
				console.log(this.moneytype)
				if (this.moneytype == 2) {
					this.amountdetail = '中奖获得红包'
					this.amount = this.selfmoney
				} else {
					this.initamount(this.userinfo.money)
				}
				this.deg += 50
			},

			//选择红包
			choicecash(e) {
				this.moneytype = e.detail.value;
			},
			//返回上一页
			gotoback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			//获取输入金额
			getranking(e){
				this.ranking = e.detail.value
			},
			//提现操作
			cashop() {
				//获取当前选中的金额
				let currentmoney = this.cashmoney[this.cashIndex]
				let getparam = {}
				//新人领取专享红包
				if (currentmoney.first) {
					getparam = {
						type: 3
					}
				} else {
					getparam = {
						type: this.moneytype,
						money: currentmoney.money==0?this.ranking:currentmoney.money
					}
				}
				getparam.pay_type = this.paymode[this.paytypeIndex].paytype
				console.log(getparam)
				// return;
				this.$HttRequest({
					url: '/member/withdraw',
					param: getparam
				}, 'POST', true).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						//更新内存总额
						this.$changefield('money', res.data);
						//初始化金额
						this.moneytype = 2
						this.cashIndex = 0
						this.downCallback()
						this.userinfo = uni.getStorageSync('user_info')
						this.initamount(this.userinfo.money)
						//弹出提示信息
						this.cashshow = true
						this.cashtip = res.message
					} else {
						this.$ShowMsg(res.message)
						if (res.status == 402001 || res.status == 402002) {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/setinfo/setinfo'
								})
							}, 2500)
						}
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('网络连接失败！');
					console.log(error)
				})
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.$HttRequest({
					url: '/member/withdrawRanking',
					param: ''
				}).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						this.moneytype = 2
						this.selfmoney = res.data.money
						this.listdata = res.data.list
						this.cashmoney = res.data.cashList
						this.$changefield('money', res.data.total)
						//console.log(uni.getStorageSync('user_info'));
						this.userinfo = uni.getStorageSync('user_info');
						this.initamount(this.userinfo.money)
					} else {
						this.$ShowMsg(res.message)
					}
					this.mescroll.endSuccess();
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error);
					console.log(error)
					this.mescroll.error()
				})
			},
			initamount(money) {
				this.amount = money
				this.amountdetail = '平台活动红包'
			},

			upCallback(page) {
				console.log(page);
			}

		}
	}
</script>

<style lang="scss">
	page {
		// background: linear-gradient(180deg, #00b38b, #f0f0f0 28%);
		// background-repeat: no-repeat;
		background-image: url(../../static/image/cashbg.png);
		background-size: 100% 385rpx;
		background-position: left top;
		background-repeat: no-repeat;
		background-color: #f0f0f0;
	}



	.radio {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx 0;

		radio {
			transform: scale(0.75);
		}

		.cashinfo {
			border-bottom: 1rpx #F1F1F1 solid;
			padding: 20rpx 0;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.cashmoney {
				width: 460rpx;
				margin: 5rpx 0;
				display: flex;
				justify-content: space-between;
			}

			.detail {
				font-size: 25rpx;
				margin: 5rpx 0;
				color: #d2d2d2;
			}
		}
	}

	//是否继续编辑按钮
	.continuetip {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 28rpx;
		width: 100%;

		.imgsucc {
			width: 100rpx;
			height: 100rpx;
			margin: 10rpx 0;
			margin-bottom: 25rpx;
		}

		.fonttext {
			font-size: 35rpx;
			font-weight: bold;
		}

		.editbutton {
			margin: 20rpx auto;
			margin-top: 40rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.continue {
				width: 85%;
				background-color: $uni-color-primary;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 85rpx;
				border-radius: 40rpx;
				font-size: 32rpx;
			}
		}
	}

	.more-cash {
		color: $uni-color-primary;
		font-size: 26rpx;
		font-weight: normal;
	}

	.paytype {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 15rpx;

		.payitem {
			border: 1rpx solid #dbdbdb;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			font-size: 28rpx;
			padding: 25rpx;
			width: 250rpx;
			color: #999;
			position: relative;

			image {
				width: 45px;
				height: 42rpx;
				margin-right: 10rpx;
			}

			.seleted {
				position: absolute;
				width: 35rpx;
				height: 35rpx;
				right: -10rpx;
				bottom: 0;
			}
		}
	}

	.cashmoneylist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		border-top: 1rpx solid #efefef;
		padding: 30rpx 0;
		flex-wrap: wrap;
		padding-bottom: 20rpx;

		.inputform {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 195rpx;
			height: 90rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			border: 1rpx solid #efefef;
			input {
				width: 120rpx;
				text-align: center;
			}
		}

		.moneyitem {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #000;
			font-size: 35rpx;
			font-weight: bold;
			border: 1rpx solid #efefef;
			width: 195rpx;
			height: 90rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			// box-shadow: 0rpx 2rpx 2rpx #b0b0b0;
			position: relative;

			.newuser {
				border-bottom-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				background-color: $uni-color-primary;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 15rpx;
				position: absolute;
				font-weight: normal;
				padding: 3rpx 10rpx;
				top: 0;
				right: 0;
				color: #fff;
			}

			.seleted {


				position: absolute;
				width: 35rpx;
				height: 35rpx;
				top: 0;
				left: 0;
			}
		}

		.hoverIndex {
			border: 1rpx solid $uni-color-primary;
			box-shadow: inset 0 0 5rpx #2680fb;
		}
	}

	.pirze-num {
		font-size: 85rpx;
		font-weight: bold;
		margin-bottom: 15rpx;


	}

	.money-box {
		width: 80%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
		margin-bottom: 30rpx;
		position: relative;

		.line {
			width: 1rpx;
			height: 50rpx;
			background-color: #efefef;
			position: absolute;
			top: 20rpx;
			left: 260rpx;
		}

		.item-box {
			width: 220rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #333;
			font-size: 28rpx;

			padding: 10rpx 0;

			.money {
				margin-bottom: 5rpx;
				font-size: 25rpx;
			}

			.desc {
				color: #9e9e9e;
			}

		}

		.choice {
			background-color: #f1f1f1;
		}
	}

	.selfmoney {
		margin-bottom: 20rpx;
		font-size: 25rpx;
		background-color: #f1f1f1;
		border-radius: 40rpx;
		padding: 8rpx 25rpx;

		text {
			color: #FF0000;
		}
	}

	.jilu {
		font-size: 26rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		border-top: 1rpx solid #f1f1f1;
		height: 60rpx;
		color: #acacac;
	}

	.rank {
		margin: 20rpx 0;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;

		.rank-right {
			font-weight: bold;
			color: #90783e;
		}

		.rank-left {
			display: flex;
			justify-content: center;
			align-items: center;

			.rankicon {
				font-weight: bold;
				color: #818181;
				width: 38rpx;
				height: 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 38rpx;
					height: 42rpx;
				}
			}

			.headimg {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					border-radius: 50%;
					width: 65rpx;
					height: 65rpx;
					margin: 0 20rpx;
				}

				text {
					font-size: 26rpx;
					font-weight: normal;
				}
			}
		}
	}

	.top-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-size: 28rpx;
		color: #575757;
		font-weight: bold;
		margin-bottom: 15rpx;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			.line {
				width: 6rpx;
				height: 35rpx;
				background-color: $uni-color-primary;
				margin-right: 15rpx;
			}
		}
	}

	.bottom-info {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		font-size: 25rpx;
		color: #8e8e8e;

		.cashguize {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;

			text {
				font-size: 26rpx;
				margin: 6rpx 0;
			}
		}
	}



	.container {
		width: 95%;
		margin: 0 auto;

		.container-item {
			margin: 30rpx 0;
			flex: 1;
			height: auto;
			background-color: #fff;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 35rpx;
			position: relative;

			.changren {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				width: 50rpx;
				height: 50rpx;
				background-color: $uni-color-primary;
				transition: all 0.5;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}

	.container::after {
		content: '';
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 600rpx;

	}

	.pirze-font {
		font-size: 25rpx;
		color: #8e8e8e;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 2rpx;
		}
	}

	.cash-button {
		width: 100%;
		height: 85rpx;
		background-color: $uni-color-primary;
		margin: 30rpx 0;
		color: #fff;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 0;
	}

	.navbar {

		width: 90%;
		margin: 40rpx auto;
		margin-bottom: 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #fff;

		.fontstyle {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 38rpx;
			color: #fff;
			transform: rotateY(180deg);
		}

		.bill {
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>
